/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, Image, TextInput, Switch,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数

import * as suggestAction from "../actions/suggestAction"; // 导入action方法
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";

class Suggest extends Component {
  componentWillReceiveProps(nextProps) {
    const { suggestReducer } = nextProps;
    if (suggestReducer != null) {
      const { success } = suggestReducer;
      if (success === true) {
        NavigatorUtil.goBack();
      }
    }
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(suggestAction.editSuggestUnmount());
  }

  handleClick() {
    const { props } = this;
    const { suggestReducer } = props;
    const { title, content } = suggestReducer;
    props.dispatch(suggestAction.submitSuggest(title, content));
  }

  render() {
    const { props } = this;
    const { suggestReducer } = props;
    const { title, content, loading } = suggestReducer;
    return (
      <BasePage style={styles.container} showLoading={loading}>
        <View style={styles.mainContainer}>
          <TextInput
            ref={c => (this.input = c)}
            value={title}
            onChangeText={text => props.dispatch(suggestAction.inputTitel(text))}
            style={styles.input}
            numberOfLines={1}
            textAlignVertical="center"
            underlineColorAndroid={Color.transparent}
            placeholder="请输入反馈标题"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
        </View>
        <View style={styles.subContainer}>
          <TextInput
            ref={c => (this.input = c)}
            value={content}
            onChangeText={text => props.dispatch(suggestAction.inputContent(text))}
            style={styles.input}
            multiline
            textAlignVertical="top"
            underlineColorAndroid={Color.transparent}
            placeholder="请输入反馈意见"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
        </View>
        <Button
          onPress={() => this.handleClick()}
          buttonStyle={styles.btnContainer}
          textStyle={styles.btnText}
          title="提交"
        />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
    alignItems: "center",
  },
  mainContainer: {
    paddingHorizontal: scale * 16,
    width: ScreenWidth - 64 * scale,
    height: 48 * scale,
    borderWidth: 1,
    alignItems: "center",
    borderColor: Color.text_assist,
    borderRadius: scale * 5,
    marginTop: scale * 20,
  },
  subContainer: {
    padding: scale * 16,
    width: ScreenWidth - 64 * scale,
    height: 148 * scale,
    borderWidth: 1,
    borderColor: Color.text_assist,
    borderRadius: scale * 5,
    marginTop: scale * 30,
  },
  btnContainer: {
    marginTop: scale * 32,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  input: {
    flex: 1,
    width: ScreenWidth - scale * 96,
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    paddingTop: 0,
    paddingBottom: 0,
  },
});

const reducers = state => {
  return {
    suggestReducer: state.suggestReducer,
  };
};

export default connect(reducers)(Suggest);
